<template>
  <view class="page-view"> 
  	  <view class="top-bg">
		   	  <u-sticky>
  	  	<view class="return" @click="goToBack()">
  	  		<u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
  	  	</view>		
  	  	运维打卡
		 </u-sticky>
  	  </view>	 
  <view class="posBox">
	  <view v-if="terminalId" class="selectBox" @click="goToSelect()">
		  <view class="">选择终端：{{terminalName}}</view>
		  <u-icon name="arrow-right" color="#5E5E5E " bold="true" size="28"></u-icon>
	  </view>
  	<view class="yunwei-date">
  		<view class="itemBox">
  			<view class="">开始运维</view>
			<view class="time">{{startTime}}</view>
			<view class="dkStatus" :class="{'dkStatus2':startStatus==1}">{{startStatus==1?'已打卡':'未打卡'}}</view>
  		</view>
		<view class="itemBox">
			<view class="">结束运维</view>
			<view class="time">{{endTime}}</view>
			<view class="dkStatus" :class="{'dkStatus2':endStatus==1}">{{endStatus==1?'已打卡':'未打卡'}}</view>
		</view>
  	</view>
	<view class="dk-operation">
		<view class="circleBox" :class="{'circleBox2':dkStatus==3}" @click="yunweiDakaFn()">
			<view class="">{{dkStatus==3?'无法打卡':dkStatus==1?'开始运维打卡':dkStatus==2?'更新结束运维打卡':''}}</view>
			<view class="nowTime">{{nowTime}}</view>
		</view>
		<!-- <view class="grey" v-if="dkStatus==0">
			<image class="img" src="../../static/icon/error.png" mode=""></image>
			请先选择终端
		</view> -->
		<view class="grey" v-if="dkStatus==3">
			<image class="img" src="../../static/icon/error.png" mode=""></image>
			未进入打卡范围
		</view>
		<view class="grey" v-else>
			<image class="img" src="../../static/icon/true.png" mode=""></image>
			已进入打卡范围
		</view>
	</view>
  </view>
  </view>
</template>
<script>
import { checkOMmission,queryCheckDetail } from '../../api/yunwei'
  export default {
    name:'yunWeiDaKa',
    data(){
      return{
		terminalName:'请选择终端',
		terminalId:'',
		villageId:'',
		startStatus:'',
		endStatus:'',
		startTime:'--',
		endTime:'--',
		nowTime:'',
		dkStatus:'',
		timer:'',
      }
    },
	onLoad() {},
	onShow() {
		this.villageId = uni.getStorageSync('villageId')
		this.terminalName=uni.getStorageSync('terminalName')
		this.terminalId=uni.getStorageSync('terminalId')
		this.queryCheckDetail()
	},
	mounted() {
	      this.timer = setInterval(() => {
	        this.getNowTime()
	      },1000)
		  // let that = this
		  // uni.getLocation({
		  //   type: 'gcj02',
		  //   success: function(res) {
		  //     // console.log('当前位置的经度：' + res.longitude);
		  //     // console.log('当前位置的纬度：' + res.latitude);
		  //     that.location = res
		  //     // that.queryCheckDetail()
		  //   }
		  // });
	    },
	    // 组件销毁时关闭定时器
	    beforeDestroy() {
	      clearInterval(this.timer)
	    },
		
    methods:{
      goToBack(){
		  wx.navigateBack({
		      delta: 1
		    });
      // uni.navigateTo({
      // 			  url:'/pages/home/home'
      // })
      },
	  //获取当前时间
	        getNowTime() {
	          var date = new Date();
	          var hour = date.getHours();
	          //分 getMinutes()： (0 ~ 59)
	          var minute = date.getMinutes();
	          //秒 getSeconds()：(0 ~ 59)-
	          var second = date.getSeconds();
	          var time = this.addZero(hour) + ":" +this.addZero(minute) + ':' + this.addZero(second);
	              this.nowTime = time
				  // this.nowTime2=this.addZero(hour) + ":" +this.addZero(minute)
	          },
	          //小于10的拼接上0字符串
	          addZero(s) {
	              return s < 10 ? ('0' + s) : s;
	          },
	  goToSelect(){
		  uni.navigateTo({
			  url:'/subpack_YunWei/yunWeiDaka/terminalSelect'
		  })
	  },
	  async queryCheckDetail(){
		  const terminalId=this.terminalId
		  const villageId=terminalId?'':this.villageId
		  const location = uni.getStorageSync('location')
	  		  const res=await queryCheckDetail({
	  			  // latitude:'29.157964',
	  			  // longitude:'119.588784',
				  latitude:location.latitude,
				  longitude:location.longitude,
	  			  terminalId,
				  villageId,
	  		  })
			  const obj=res.data.data||{}
			  this.startStatus=obj.beginCheck
			  this.endStatus=obj.endCheck
			  this.dkStatus=obj.checkType
			  if(obj.beginCheckDate){
				   const str=obj.beginCheckDate.split(' ')[1].substring(0, 5);
				  this.startTime=str
				  console.log(str);
			  } else{
			  this.startTime="--"
		  }
	  },
	  async checkOMmission(){
		  const terminalId=this.terminalId
		  const villageId=terminalId?'':this.villageId
		  const location = uni.getStorageSync('location')
		  const res=await checkOMmission({
			  // latitude:'29.157964',
			  // longitude:'119.588784',
			  latitude:location.latitude,
			  longitude:location.longitude,
			  terminalId,
			  villageId
		  })
		  const obj=res.data.data||{}
		  if(obj.endCheckDate){
		  				   const str=obj.endCheckDate.split(' ')[1].substring(0, 5);
		  				  this.endTime=str
		  				  console.log(str);
		  } else{
			  this.endTime="--"
		  }
		 // const str=obj.endCheckDate.split(' ')[1]
		 //  console.log(str);
			//   this.endTime=obj.endCheckDate
		  this.queryCheckDetail()
	  },
	  yunweiDakaFn(){
		  if(this.dkStatus==3) return
		  this.checkOMmission()
	  }
    }
    
  }  
</script>
<style lang="scss">
 .page-view {
 	 position: relative;
     height: 100vh;
   .posBox{
	   width: 100%;
 	  position: absolute;
 	  top: 200rpx;
   }
 }
 .selectBox{
	 display: flex;
	 justify-content: space-between;
	 height: 88rpx;
	 background: #FFFFFF;
	 margin: 0 32rpx;
	 line-height: 88rpx;
	 padding: 0 30rpx 0 16rpx;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
	 font-weight: bold;
	 font-size: 28rpx;
	 color: #4A4A4A;
 }
 .top-bg{
 	width: 100%;
 	height: 330rpx;
 	background: #2769F7;
 	border-radius: 0rpx 0rpx 140rpx 140rpx;
 	padding-top: 104rpx;
 	text-align: center;
 	font-weight: 600;
 	font-size: 40rpx;
 	color: #FFFFFF;
 	letter-spacing: 4rpx;
 	position: relative;
 	.return{
 		position: absolute;
 		left: 32rpx;
 		margin-top: 8rpx;
 	}
 }
 .yunwei-date{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background: #FFFFFF;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
	 margin: 16rpx 32rpx;
	 padding:32rpx;
	 .itemBox{
		 width: 275rpx;
		 background: #F5F5F5;
		 border-radius: 10rpx 10rpx 10rpx 10rpx;
		 position: relative;
		 padding: 8rpx 0 22rpx 22rpx;
		 font-weight: 800;
		 font-size: 28rpx;
		 color: #4A4A4A;
		 .dkStatus{
			 position: absolute;
			 right: 0;
			 top: 0;
			 width: 106rpx;
			 height: 52rpx;
			 line-height: 52rpx;
			 text-align: center;
			 background: #E5E5E5;
			 border-radius: 0rpx 10rpx 0rpx 10rpx;
			 font-weight: bold;
			 font-size: 24rpx;
			 color: #747474;
		 }
		 .dkStatus2{
			 background: #D5EFE7;
			 color: #74CDAF;
		 }
		 .time{
			 width: 130rpx;
			 height: 50rpx;
			 background: #FFFFFF;
			 border-radius: 26rpx 26rpx 26rpx 26rpx;
			 margin-top: 16rpx;
			 text-align: center;
			 line-height: 50rpx;
		 }
	 }
 }
 .dk-operation{
	 height: 815rpx;
	 margin: 0 32rpx;
	 background: #FFFFFF;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
	 padding-top: 234rpx;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 // justify-content: center;
	 .circleBox{
		 width: 336rpx;
		 height: 336rpx;
		 background: #3C8AFF;
		 border-radius: 50%;
		 text-align: center;
		 font-weight: bold;
		 font-size: 36rpx;
		 color: #FFFFFF;
		 display: flex;
		 flex-direction: column;
		 justify-content: center;
		 margin-bottom: 32rpx;
		 .nowTime{
			  font-size: 32rpx;
			  margin-top: 18rpx;
		 }
	 }
	 .circleBox2{
		 background: #C5C5C5;
	 }
	 .grey{
		 font-weight: 400;
		 font-size: 28rpx;
		 color: #747474;
		 .img{
			 width: 28rpx;
			 height: 28rpx;
			 vertical-align: middle;
			 margin-right: 10rpx;
		 }
	 }
 }
</style>